<template>
	<view class="addr-container">
		<view class="bg-addr">

		</view>
		<view class="addr-header">
			<view class="addr-header-txt">
				<view class="header-name hulu-font-3" style="font-weight: bold;">
					中心医院北外分院
				</view>
				<view class="" style="height:12rpx;">

				</view>
				<view class="header-detail hulu-font-5 hulu-text-color4" style="">
					4楼检验科22-5
				</view>
			</view>
			<view class="addr-tail">
				<view class="tail-distance hulu-font-5 hulu-text-color4">
					约15分钟
				</view>
				<view class="tail-icon">
					<view class="">
						<image src="../../static/assets/time.png" mode="widthFix" style="width:44rpx;height:44rpx;">
						</image>
					</view>

				</view>
			</view>

		</view>
		<view class="" style="height:24rpx">

		</view>
		<view class="addr-divider">

		</view>
		<view class="" style="height:22rpx">

		</view>
		<view class="addr-footer">
			<view class="footer-phone hulu-text-color2 hulu-font-3" style="font-weight:400;">
				预留电话
			</view>
			<view class="footer-input">
				<input type="text" class="addr-input" placeholder="请输入手机号" />
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
</script>

<style lang="scss" scoped>
	.addr-container {
		margin: 0 24rpx;
		width: 702rpx;
		height: 242rpx;
		background-color: white;
		border-radius: 16rpx;
		position: relative;
		padding: 32rpx 24rpx;
		box-sizing: border-box;

		.bg-addr {
			position: absolute;
			top: 0;
			right: 0;
			width: 230rpx;
			height: 138rpx;
			background-image: url("../../static/assets/addr.png");
		}

		.addr-header {
			display: flex;
			justify-content: space-between;

			.addr-tail {
				position: relative;
				width: 230rpx;
				z-index: 1;

				.tail-distance {
					z-index: 2;
					text-align: end;
				}

				.tail-icon {
					z-index: 2;
					text-align: end;
				}


			}


		}

		.addr-divider {
			width: 100%;
			height: 2rpx;
			background-color: #EEEEEE;
		}
		.addr-footer{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.addr-input{
				font-size: 28rpx;
				width:196rpx;
			}
		}
	}
</style>